<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" charset="UTF-8">
    <title>问答机器人</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossorigin="anonymous"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>-->
    <style>
        .selector-for-some-widget {
            box-sizing: content-box;
        }
    </style>
</head>
<body>
<div class="container-fluid" style="margin: 10px 10px">
    <div class="jumbotron jumbotron-fluid">
        <div class="container" style="text-align: center">
            <h1 class="display-4">问答机器人</h1>
            <p class="lead">请在下面输入框输入你的问题</p>
        </div>
    </div>
    <form style="margin: 1rem 1.5rem">
        <div class="form-group">
            <label for="systemContent">机器人的人设(默认值)：</label>
            <input type="email" class="form-control" id="systemContent" aria-describedby="emailHelp" placeholder="请设定机器人的人设：你是一个很棒的助手" value="你是一个全能的程序员">
        </div>
        <div class="form-group">
            <input type="email" class="form-control" id="message" aria-describedby="emailHelp" placeholder="请输入问题：">
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary btn-md btn-block" id="send">发送</button>
        </div>
        <div class="form-group" id="markdown">
            <!--<label for="responseId">回复内容</label>-->
            <textarea class="form-control" id="response" rows="12" placeholder="回复内容：">

            </textarea>
        </div>
    </form>

    <!-- Modal -->

    <div id="myModal" class="modal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p style="color:red">正在处理中，请稍后再试...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal2" class="modal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p style="color:red">问题不能为空</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var waiting = false; // 是否正在处理中
    var send = document.getElementById('send');


    document.onkeydown = function (e) {
        var ev = document.all ? window.event : e;
        if (ev.keyCode === 13) {
            ev.preventDefault();
            send.click();
        }
    };

    send.onclick = function () {
        document.getElementById('response').value = "";
        if (waiting) {
            console.log('lock')
            $('#myModal').modal()
            return;
        }

        var message = document.getElementById('message').value;
        var systemContent = document.getElementById('systemContent').value;
        if (message == "") {
            $('#myModal2').modal()
            return;
        }
        waiting = true;

        var adminToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiZXhwIjoxNjc5MjMyMjc3LCJpc3MiOiJnaW4tYmxvZyJ9.HPLsXCsoQcHwjiB-FAriAyZGEN7potTD0a6Pw4Hcoiw'
        var url = 'http://localhost:8899/api/v1/chat35Stream?token='+adminToken+"&message="+message+"&system_content="+systemContent;
        var eventSource = new EventSource(url);

        eventSource.onmessage = function (e) {
            var data = JSON.parse(e.data);
            data = data.delta
            console.log(data)
            var div = document.getElementById('response');
            if ("finish" !== data.content) {
                if ("\n\n" !== data.content) {
                    div.value += data.content;
                }
            } else {
                div.value += "[结束]\n";
            }
        };

        eventSource.onerror = function (e) {
            waiting = false;
            console.log(e);
            eventSource.close();
        };
    }

</script>
</body>
</html>